<template>
	<div id="JsonCodeFormat">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h1><i class="el-icon-lx-cascades"></i> JSON代码格式化（整理JSON格式）</h1>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-row>
			<el-col :span="12" class="Jsoncol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20}" v-model="textarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card :body-style="{ padding: '0px' }">
					<vue-json-editor v-model="Jsontext" :show-btns="false" :mode="'code'" lang="zh" @json-change="onJsonChange"
					 @json-save="onJsonSave" @has-error="onError">
					</vue-json-editor>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-button type="primary" @click="JsonCodeFormatFun">格式化</el-button>
			</el-col>
		</el-row>
	</div>
	<!-- <div>
		<p>vue-json-editor使用</p> -->
	<!--在模板中使用vue-json-editor-->
	<!-- <vue-json-editor v-model="json" 
		  :show-btns="false" 
		  :mode="'code'" 
		  lang="zh"
		  @json-change="onJsonChange" 
		  @json-save="onJsonSave" 
		  @has-error="onError">   
		</vue-json-editor>
	</div> -->
</template>

<script>
	// 引入vue-json-editor模块
	import vueJsonEditor from 'vue-json-editor'
	import 'vue-json-viewer/style.css'
	export default {
		data: function() {
			return {
				textarea: [],
				Jsontext: '',
				json: [{
						"name": "Dirk",
						"age": 1234
					},
					{
						"name": "Jason"
					}
				],
			}
		},

		// 注入vueJsonEditor组件
		components: {
			vueJsonEditor
		},

		methods: {
			JsonCodeFormatFun() {
				try {
					this.Jsontext = JSON.parse(this.textarea)
				} catch (e) {
					this.$message.error("json数据格式不正确,请输入正确的json字符串!");
				}
			},
			onJsonChange(value) {
				console.log('value:', value);
			},

			onJsonSave(value) {
				console.log('value:', value);
			},

			onError(value) {
				console.log('value:', value);
			}
		}
	}
</script>
<style>
	#JsonCodeFormat {
		width: 100%;
	}
</style>
